<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Area Selector</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="grid">
        <div class="item" data-id="1">1</div>
        <div class="item" data-id="2">2</div>
        <div class="item" data-id="3">3</div>
        <div class="item" data-id="4">4</div>
        <div class="item" data-id="5">5</div>
        <div class="item" data-id="6">6</div>
        <div class="item" data-id="7">7</div>
        <div class="item" data-id="8">8</div>
        <div class="item" data-id="9">9</div>
        <div class="item" data-id="10">10</div>
        <div class="item" data-id="11">11</div>
        <div class="item" data-id="12">12</div>
        <div class="item" data-id="13">13</div>
        <div class="item" data-id="14">14</div>
        <div class="item" data-id="15">15</div>
        <div class="item" data-id="16">16</div>
        <div class="item" data-id="17">17</div>
        <div class="item" data-id="18">18</div>
        <div class="item" data-id="19">19</div>
        <div class="item" data-id="20">20</div>
        <div class="item" data-id="21">21</div>
        <div class="item" data-id="22">22</div>
        <div class="item" data-id="23">23</div>
        <div class="item" data-id="24">24</div>
        <div class="item" data-id="25">25</div>
        <div class="item" data-id="26">26</div>
        <div class="item" data-id="27">27</div>
        <div class="item" data-id="28">28</div>
        <div class="item" data-id="29">29</div>
        <div class="item" data-id="30">30</div>
        <div class="item" data-id="31">31</div>
        <div class="item" data-id="32">32</div>
        <div class="item" data-id="33">33</div>
        <div class="item" data-id="34">34</div>
        <div class="item" data-id="35">35</div>
        <div class="item" data-id="36">36</div>
        <div class="item" data-id="37">37</div>
        <div class="item" data-id="38">38</div>
        <div class="item" data-id="39">39</div>
        <div class="item" data-id="40">40</div>
        <div class="item" data-id="41">41</div>
        <div class="item" data-id="42">42</div>
        <div class="item" data-id="43">43</div>
        <div class="item" data-id="44">44</div>
        <div class="item" data-id="45">45</div>
        <div class="item" data-id="46">46</div>
        <div class="item" data-id="47">47</div>
        <div class="item" data-id="48">48</div>
        <div class="item" data-id="49">49</div>
        <div class="item" data-id="50">50</div>
        <div class="item" data-id="51">51</div>
        <div class="item" data-id="52">52</div>
        <div class="item" data-id="53">53</div>
        <div class="item" data-id="54">54</div>
        <div class="item" data-id="55">55</div>
        <div class="item" data-id="56">56</div>
        <div class="item" data-id="57">57</div>
        <div class="item" data-id="58">58</div>
        <div class="item" data-id="59">59</div>
        <div class="item" data-id="60">60</div>
        <div class="item" data-id="61">61</div>
        <div class="item" data-id="62">62</div>
        <div class="item" data-id="63">63</div>
        <div class="item" data-id="64">64</div>
        <div class="item" data-id="65">65</div>
        <div class="item" data-id="66">66</div>
        <div class="item" data-id="67">67</div>
        <div class="item" data-id="68">68</div>
        <div class="item" data-id="69">69</div>
        <div class="item" data-id="70">70</div>
        <div class="item" data-id="71">71</div>
        <div class="item" data-id="72">72</div>
        <div class="item" data-id="73">73</div>
        <div class="item" data-id="74">74</div>
        <div class="item" data-id="75">75</div>
        <div class="item" data-id="76">76</div>
        <div class="item" data-id="77">77</div>
        <div class="item" data-id="78">78</div>
        <div class="item" data-id="79">79</div>
        <div class="item" data-id="80">80</div>
        <div class="item" data-id="81">81</div>
        <div class="item" data-id="82">82</div>
        <div class="item" data-id="83">83</div>
        <div class="item" data-id="84">84</div>
        <div class="item" data-id="85">85</div>
        <div class="item" data-id="86">86</div>
        <div class="item" data-id="87">87</div>
        <div class="item" data-id="88">88</div>
        <div class="item" data-id="89">89</div>
        <div class="item" data-id="90">90</div>
        <div class="item" data-id="91">91</div>
        <div class="item" data-id="92">92</div>
        <div class="item" data-id="93">93</div>
        <div class="item" data-id="94">94</div>
        <div class="item" data-id="95">95</div>
        <div class="item" data-id="96">96</div>
        <div class="item" data-id="97">97</div>
        <div class="item" data-id="98">98</div>
        <div class="item" data-id="99">99</div>
    </div>
    <script src="./AreaSelector.js"></script>
    <script src="./script.js"></script>
</body>
</html>